<template>
  <div>
    <div id="main"></div>
  </div>
</template>

<script>
import echarts from "@/plugins/ECharts";
export default {
  mounted() {
    this.$nextTick(function () {
      // 仅在整个视图都被渲染之后才会运行的代码
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "学习时长",
          top: 20,
          left: 33,
          textStyle: {
            fontSize: 14,
          },
          subtext: "单位：分",
          textVerticalAlign: "top",
        },
        xAxis: {
          type: "category",
          data: ["5.7", "5.8", "5.9", "5.10", "5.11", "5.12", "5.13"],
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          axisLabel: {
            show: false,
          },
        },
        series: [
          {
            name: "学习时长",
            type: "line",
            data: this.$store.state.user.latelyTime,
            smooth: true,
            bottom: 40,
            label: {
              show: true,
              position: "top",
              textStyle: {
                fontSize: 20,
              },
            },
          },
        ],
        // legend: {
        //   bottom: 20,
        // },
        grid: {
          bottom: 30,
        },
      });
    });
  },
};
</script>

<style lang="scss" scoped>
#main {
  width: 340px;
  height: 250px;
  background-color: #fff;
  margin: 25px auto 0;
  border-radius: 10px;
}
</style>